
<template>
<view> 
	<cu-custom :customStyle="{backgroundColor:'#fff'}" :isBack="true" :paddingHeight="48">
		<block #backText>返回</block>
		<block #content><span style="font-size: 38rpx;">编辑兼职信息</span></block>
	</cu-custom>
	
	<view style="position: relative;">
			<view v-if="formData.thumbUrl" style="position: absolute;top: 0;width:100%;">
				<u-image width="100%" :height="thumbHeight * 2" :src="formData.thumbUrl" mode="widthFix"></u-image>
			</view>
			
			<!-- 封面衬底 -->
			<view v-if="formData.thumbUrl" :style="{height:(thumbHeight - 20) + 'px'}" style="background-color: transparent;"></view>
			
			<!-- 主卡片 -->
			<view :style="mainCardStyle" style="background-color: white;position: relative;">
				<view v-if="!formData.thumbUrl" style="display: flex;justify-content: center;align-items: center;height: 100rpx;background-color: white;">
						<view @click="onThumb" style="color: #9c9c9c;font-size: 18rpx;">
							<i class="icon iconfont icon-tupian1"></i>
							添加封面
						</view>
					</view>
					<!-- 标题内容 -->
					<view class="u-page" >
						<!-- 标题 -->
						<u--form ref="formData2" :model="formData" :rules="rules" labelWidth="88">
							<u-form-item  label="标题" prop="title" ref="item1" :required="true">
								<u--input
										v-model="formData.title"
										border="none"
								></u--input>
							</u-form-item>
							<u-line></u-line>		
						</u--form>
						
						<!-- 文案内容编辑器 -->
						<view style="height: 160px;">
							<editor id="editor" style="height: 100%;min-height: 120rpx;" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
						</view>
					</view>
					
					<!-- 添加附件入口 板块-->
					<view style="margin-top: 1px;padding: 20rpx;background-color: white;">
						<!-- 添加附件入口 -->
						<view @click="showAddAssets = true" style="display: flex;justify-content: flex-start;align-items: center;">
							<!-- 加号 -->
							<view style="border: solid 1px #b4b4b4;display: inline-block;border-radius: 10rpx;">
								<view style="width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;">
									<u-icon name="plus" color="#b4b4b4"></u-icon>
								</view>
							</view>
							
							<span style="margin-left: 10rpx;font-size: 20rpx;color: #b4b4b4;">添加图文/视频/文件/公众号/小程序</span>
						</view>
					</view>
					 
					<view style="border-radius: 10rpx;margin: 10px 10px 10px 10px;padding: 20rpx;background-color: white;">
						<u-cell-group :border="false">
							<!-- 开始时间 -->
							<u-cell title="开始时间" :value="$dayjs(formData.activityStartDateTime).format('YYYY-MM-DD hh:mm:ss')" isLink @click="showActivityStartDateTimeSel = true"></u-cell>
							<!-- 结束时间 -->
							<u-cell title="结束时间" :value="$dayjs(formData.activityEndDateTime).format('YYYY-MM-DD hh:mm:ss')" isLink @click="showActivityEndDateTimeSel = true"></u-cell>
							<!-- 打卡打卡周期 -->
							<u-cell title="打卡周期" :value="formData.cycle" isLink @click="showCycleSel = true"></u-cell>
							<!-- 打卡时间段 -->
							<u-cell
								title="打卡时段"
								:isLink="false"
							>
								<template #value>
									<view style="width: 360rpx;display: flex;justify-content: space-between;align-items: center;">
										<view @click="showPeriodTimeStartSel = true" style="justify-content: center;align-items: center;display: flex;width: 160rpx;height: 60rpx;border: 1px solid #b4b4b4;border-radius: 8rpx;">
											{{formData.periodStarTime}}
										</view>
										<view>-</view>
										<view @click="showPeriodTimeEndSel = true" style="justify-content: center;align-items: center;display: flex;width: 160rpx;height: 60rpx;border: 1px solid #b4b4b4;border-radius: 8rpx;">
											{{formData.periodEndTime}}
										</view>
									</view>
								</template>
							</u-cell>
							
							<!-- 允许一天多次打卡 -->
							<u-cell title="允许一天多次打卡(频率)" :value="formData.allowMult" isLink  @click="showAllowMult = true"></u-cell>
							<!-- 打卡提醒 -->
							<u-cell title="打卡提醒" :value="formData.activityRemind" isLink @click="showActivityRemind = true"></u-cell>
							<!-- 允许补卡 -->
							<u-cell title="允许补卡" :value="formData.allowRemedy" isLink @click="showAllowRemedy = true"></u-cell>
							<!-- 允许他人代打 -->
							<u-cell title="允许他人代打" :value="formData.allowProxy" :border="false" isLink @click="showAllowProxy = true"></u-cell>
						</u-cell-group>
					</view>
					 
					<view style="border-radius: 10rpx;margin: 0px 10px 0px 10px;padding: 20rpx;background-color: white;">
						  <u-collapse
						    :border="false"
						    @change="change"
						  >
						    <u-collapse-item
						      title="更多设置"
						      name="Docs guide"
						    >
						      <u-cell-group :border="false">
									<!-- 活动通知 -->
									<u-cell title="活动通知" value="未关注公众号不能接收提醒" isLink :customStyle="{color:'#fff'}">
									</u-cell>
								</u-cell-group>
						    </u-collapse-item>
						  </u-collapse>
					</view>
					
				<!-- <button type="warn" @tap="print">打印</button> -->
			</view>
			
			<!-- 添加附件 选项弹窗 -->
			<u-popup :show="showAddAssets" :round="10" mode="bottom" @close="showAddAssets = false"  :closeOnClickOverlay="true">
				<view>
					<!-- 标题 -->
					<text style="display: flex;align-items: center;justify-content: center;padding: 20rpx;">请选择附件</text>
					
					<!-- 选择列  项目-->
					<view @click="showAddAssets = false" v-for="(item,index) in assetsItems"  style="padding: 20rpx 20rpx;display: flex;justify-content: flex-start;align-items: flex-start;border-bottom: solid 1px #f3f3f3;">
						<view >
							<i :class="assetsItemsClass(item)" style="font-size: 24px;"></i>
						</view>
						<view style="justify-content: space-between;margin-left: 10rpx;display: flex;align-items: flex-start;flex-direction: column;">
							<view style="font-size: 30rpx;">{{item.name}}</view>
							<view style="font-size: 24rpx;color: #b4b4b4;margin-top: 10rpx;">{{item.text}}</view>
						</view>
					</view>
				</view>
			</u-popup>
			
			<!-- 活动开始日期选择 -->
			<u-datetime-picker
				:show="showActivityStartDateTimeSel"
				:minDate="$dayjs().add(1,'minute').valueOf()"
				:maxDate="$dayjs().add(1,'year').valueOf()"
				v-model="formData.activityStartDateTime" 
				mode="datetime"
				:closeOnClickOverlay="true"
				@confirm="showActivityStartDateTimeSel = false" 
				@cancel="showActivityStartDateTimeSel = false"
				@change="change"
				@close="showActivityStartDateTimeSel = false"
			></u-datetime-picker>
			
			<!-- 活动结束日期选择 -->
			<u-datetime-picker
				:show="showActivityEndDateTimeSel"
				:minDate="$dayjs().add(1,'minute').valueOf()"
				:maxDate="$dayjs().add(1,'year').valueOf()"
				v-model="formData.activityEndDateTime"
				mode="datetime"
				:closeOnClickOverlay="true"
				@confirm="showActivityEndDateTimeSel = false"
				@cancel="showActivityEndDateTimeSel = false"
				@change="change"
				@close="showActivityEndDateTimeSel = false"
			></u-datetime-picker>
			
			
			<!-- 打卡时段  开始 -->
			<u-datetime-picker
				:show="showPeriodTimeStartSel"
				v-model="formData.periodStarTime"
				mode="time"
				:closeOnClickOverlay="true"
				@confirm="confirmTimeStartSelector"
				@cancel="showPeriodTimeStartSel = false"
				@change="change"
				@close="showPeriodTimeStartSel = false"
			></u-datetime-picker>
			
			<!-- 打卡时段  结束 -->
			<u-datetime-picker
				:show="showPeriodTimeEndSel"
				v-model="formData.periodEndTime"
				mode="time"
				:closeOnClickOverlay="true"
				@confirm="showPeriodTimeEndSel=false"
				@cancel="showPeriodTimeEndSel = false"
				@change="change"
				@close="showPeriodTimeEndSel = false"
			></u-datetime-picker>
			
			<!-- 选择打卡周期 -->
			<u-action-sheet :actions="cycleList" 
				:title="选择打卡周期" 
				:show="showCycleSel" 
				:closeOnClickOverlay="true"
				@select="(value)=>{formData.cycle = value.name}"
				@close="showCycleSel = false"
			></u-action-sheet>
			
			<!-- 允许多次打卡(频率) -->
			<u-action-sheet :actions="cycleList"
				:title="允许多次打卡" 
				:show="showAllowMult" 
				:closeOnClickOverlay="true"
				@select="(value)=>{formData.allowMult = value.name}"
				@close="showAllowMult = false"
			></u-action-sheet>
			
			<!-- 打卡提醒 -->
			<u-action-sheet :actions="cycleList"
				:title="选择打卡提醒" 
				:show="showActivityRemind" 
				:closeOnClickOverlay="true"
				@select="(value)=>{formData.activityRemind = value.name}"
				@close="showActivityRemind = false"
			></u-action-sheet>
			

			<!-- 允许补打 -->
			<u-action-sheet :actions="cycleList"
				:title="允许补打" 
				:show="showAllowRemedy" 
				:closeOnClickOverlay="true"
				@select="(value)=>{formData.allowRemedy = value.name}"
				@close="showAllowRemedy = false"
			></u-action-sheet>
			
			<!-- 允许代打 -->
			<u-action-sheet :actions="cycleList"
				:title="允许代打" 
				:show="showAllowProxy" 
				:closeOnClickOverlay="true"
				@select="(value)=>{formData.allowProxy = value.name}"
				@close="showAllowProxy = false"
			></u-action-sheet>
			
			<!-- 页面底衬 -->
			<view style="height: 120rpx;width: 100%;background-color: #f00;"></view>
			
			
			<!-- 底部操作条 -->
			<view
				style="background-color: #fff;width: 100%;height: 120rpx;box-shadow: 1px 9px 20px 0px #000000d4;position: fixed;bottom: 0;">
				<view style="
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					">
					<view style="flex: 0 0 20%;text-align: center;color: #f00;">
						<view style="
							display: flex;
							flex-direction: column;
							align-items: center;">
							<u-icon name="setting" color="#9c9c9c" size="20"></u-icon>
							<p style="color: #9c9c9c;font-size: 24rpx;">管理</p>
						</view>
					</view>
			 
					<view style="flex: 0 0 80%;">
						<view @click="onPublish" class="cu-btn round" style="
								display: flex;
								margin: 0 20rpx;
								border-radius: 250px;
								font-size: 30rpx;
								background-color: #ff8725d4;
								color: white;
								height: 80rpx;
							">
							立即发布
						</view>
					</view>
				</view>
			</view>
	</view>

</view>
</template>

<script>
	export default {
		data() {
			return { 
				showActivityStartDateTimeSel:false,
				showActivityEndDateTimeSel:false,
				showPeriodTimeStartSel:false, //时段
				showPeriodTimeEndSel:false, //时段
				showCycleSel:false, // 周期
				showActivityRemind:false,
				showAllowMult:false, //允许多次打卡
				showAllowRemedy:false,
				showAllowProxy:false, //'允许发布人和管理员'
				
				formData:{
					title:'',
					thumbUrl:null,
					activityStartDateTime:this.$dayjs().valueOf(),
					activityEndDateTime: this.$dayjs().add(1,'day').valueOf(),
					periodStarTime: '00:00',
					periodEndTime: '23:59',
					cycle:'每天',
					activityRemind:'不启用',
					allowMult:'不启用', //允许多次打卡
					allowRemedy:'不启用',
					allowProxy:'允许发布人和管理员'
				},
				
				thumbHeight : 180,
				
				
				showAddAssets:false,
				editorCtx:null,
				placeholder: '开始输入...',
				rules:{
					title:{
						required: true
					}
				},
				assetsItems:[
					{
						name:'文字',
						icon:'icon-wenzi',
						text:'可插入多个文本段,达到图文混排的效果'
					},
					{
						name:'大图',
						icon:'icon-tupian1',
						text:'可完整显示图片'
					},
					{
						name:'小图',
						icon:'icon-jiugongge-line-',
						text:'九宫格显示图片'
					},
					{
						name:'视频',
						icon:'icon-shipin',
						text:'最多上传90s,不超过15M的视频'
					},
					{
						name:'附件',
						icon:'icon-fujian02',
						text:'最多可上传6个附件'
					},
					{
						name:'公众号',
						icon:'icon-weixingongzhonghao',
						text:'可跳转到公众号文章'
					},
					{
						name:'其他小程序',
						icon:'icon-xiaochengxu',
						text:'可跳转到任意小程序'
					},
					{
						name:'一键复制区',
						icon:'icon-fuzhi',
						text:'可添加网址、微信号等等、方便他人复制'
					},
					{
						name:'关联职位',
						icon:'icon-a-1',
						text:'可插入多个发布过的接龙'
					}
				],
				cycleList:[
					{
						name:'每天',
						fontSize:'34'
					},
					{
						name: '周日'
					},
					{
						name: '工作日', //开启后文字不显示
					}
				]
			}
		},
		computed:{
			mainCardStyle() {
				let style = {}
				
				if(this.formData.thumbUrl)
				{
					style.borderRadius ='10px 10px 0 0',
					style.overflow = 'hidden'
				}
				
				return style
			},
			assetsItemsClass()
			{
				return function(item){
					let itemsClass = {
						icon:true,
						iconfont:true
					}
					
					itemsClass[item.icon] = true
			
					return itemsClass;
				}
			}
		},
		methods: {
			onCycle()
			{
				
			},
			onPublish(){
				uni.navigateTo({
					url:"/pages/field-options/field-options",
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// assetsItemsClass(index)
			// {
			// 	let itemsClass = {
			// 		icon:true,
			// 		iconfont:true
			// 	}
				
			// 	itemsClass[this.assetsItems[index - 1].icon] = true
				
			// 	console.log(itemsClass)
			// 	console.log(index)
			// 	//itemsClass['icon-wenzi'] = true
				
				
			// 	//'icon','iconfont',this.assetsItems[index]]
				
			// 	//console.log(itemsClass)
				
			// 	return itemsClass;
			// },
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif
				
				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
				  this.editorCtx = res.context
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			},
			save(){

				let html = this.editorCtx.getContents({
					success(html){
						console.log(html)
					}
				})
				
				
			},
			onAddAssets(){
				this.showAddAssets = true
			},
			closeAddAssets(){
				this.showAddAssets = false
			},
			openAddAssets(){
				
			},
			onTimeStartFocus(){
				this.showPeriodTimeStartSel = true
			},
			onThumb(){
				let that = this
				uni.chooseImage({
					count:1,
					sourceType: ['album'], 
					success(result) {
						that.formData.thumbUrl = result.tempFilePaths[0]
						console.log(result.tempFilePaths[0])
					}
				})
			}
		}
	}
</script>

<style scoped>
	 /* @import '@/css/editor.css'; */
	/* @import '@/css/iconfont/iconfont.css'; */
	
</style>

<style lang="scss" scoped>
	
.u-page {
	padding: 15px 15px 0px 15px;
	background-color: #fff;
}

::v-deep .u-collapse-item__content__text {
	padding:0;
}

::v-deep .u-cell__value {
	color: #9f9f9f
}
</style>